<template>
  <div class="hotel-search">
    <div class="area" ref="searchCity">
      <label class="search-title">目的地</label>
      <div class="search-input">
        <el-input 
          v-model="destination" 
          @focus="searchInputFocus"
          placeholder="请输入目的地">
        </el-input>
      </div>
      <city-list 
        class="hotel-city-list" 
        v-bind="citiesList"
        :isLoadCityList="isLoadCityList"
        @city-change="cityChangeHandler"
      ></city-list>
    </div>
    <div class="area">
      <label class="search-title">入&nbsp;&nbsp;&nbsp;住</label>
      <el-date-picker
        v-model="checkInValue"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      <label class="search-title">退&nbsp;&nbsp;&nbsp;房</label>
      <el-date-picker
        v-model="checkOutValue"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </div>
    <div class="area">
      <label class="search-title">关键词</label>
      <div class="search-input">
        <el-input v-model="keywordInput" placeholder="如位置/酒店名/品牌"></el-input>
      </div>
    </div>
    <div class="area">
      <div class="search-button">
        <el-button type="danger" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import CityList from "../../../components/CityList"; //城市选择组件
import axios from "axios";

export default {
  name: "Hotel",
  components: {
    CityList
  },
  data() {
    return {
      isLoadCityList: false,
      destination: "北京市",
      citiesList: {},
      keywordInput: "",
      checkInValue: "",
      checkOutValue: ""
    };
  },
  methods: {
    getCityData() {
      axios
        .get("/api/city.json")
        .then(this.hanlderSuccessCity)
        .catch(error => console.log(error));
    },
    hanlderSuccessCity(res) {
      res = res.data;
      if (res.success) {
        this.citiesList = res;
      }
    },
    cityChangeHandler(city) {
      this.isLoadCityList = false;
      this.destination = city;
    },
    searchInputFocus() {
      this.getCityData();
      this.isLoadCityList = true;
    },
    isSearchCityNode(e) {
      if (!this.$refs.searchCity.contains(e.target)) {
        this.isLoadCityList = false;
      }
    }
  },
  activated() {
    document.addEventListener("click", this.isSearchCityNode);
  },
  deactivated() {
    document.removeEventListener("click", this.isSearchCityNode);
  }
};
</script>
<style lang="scss" scoped>
.hotel-search {
  padding: 2.5em;
  color: #666;
  .area {
    padding: 0.5em 0;
    .el-date-editor {
      width: 10em;
    }
    .search-title {
      padding: 0 1em;
    }
    .search-input {
      width: 22.5em;
      display: inline-block;
    }
    .search-button {
      padding-left: 5em;
    }
  }
  .hotel-city-list {
    margin-top: 0.5em;
    margin-left: 1em;
    position: absolute;
    background-color: #fff;
    z-index: 9;
  }
}
</style>
